import React from 'react';
import ReactDOM from 'react-dom';
import {List, Picker} from 'antd-mobile';

class Job extends React.Component {
    constructor(props) {
		super(props);
        this.state = {
            jobList1: [],
            jobList2: [],
            jobList3: [],
            job1: [],
            job2: [],
            job3: [],
            List: []
        }
    }
    
    componentDidMount() {
        this.getjobList();
    }

    getjobList = () => {
        T.fetch({ 
            url:'/tools/occupation/0.json',
        }).then((res)=>{
            if(res.success){
                let temp = [];
                res.value.forEach((item, index)=>{
                    temp.push({
                        label: item.name,
                        value: item.code
                    })
                })
                this.setState({jobList1:temp})
            }
        })
    }

    getJobList2 = (code) => {
        T.fetch({ 
            url:`/tools/occupation/${code}.json`,
        }).then((res)=>{
            if(res.success){
                let temp = [];
                res.value.forEach((item, index)=>{
                    temp.push({
                        label: item.name,
                        value: item.code
                    })
                })
                this.setState({jobList2:temp, jobList3: []})
            }
        })
    }

    getJobList3 = (code) => {
        T.fetch({ 
            url:`/tools/occupation/${code}.json`,
        }).then((res)=>{
            if(res.success){
                let temp = [];
                res.value.forEach((item, index)=>{
                    temp.push({
                        label: item.name,
                        value: item.code,
                    })
                })
                this.setState({jobList3:temp, List: res.value})
            }
        })
    }

    handleJob1 = (value) => {
        this.setState({job1:value})
        this.getJobList2(value.toString())
    }

    handleJob2 = (value) => {
        this.setState({job2:value})
        this.getJobList3(value.toString())
    }

    handleJob3 = (value) => {
        this.setState({job3:value})
        let damageLevel;
        for(let i of this.state.List){
            if(i.code == value[0]){
                damageLevel = i.damageLevel;
            }
        }
        this.props.callback && this.props.callback({insureOccupation:value[0], damageLevel});
    }

    render() {
        const Lang = window.LangMessage ||{};
        let msg = Lang.please_select || `請選擇`;
        return (
            <div className="job">
                <List>				
                    <Picker extra={msg} data={this.state.jobList1} cols={1} value={this.state.job1} onChange={(value)=>this.handleJob1(value)} okText={Lang.ok_text || '确认'} dismissText={Lang.cancel || "取消"}>
                        <List.Item arrow="horizontal">{`${Lang.job_type || '職業類別'}1`}</List.Item>
                    </Picker>
                    <Picker extra={msg} data={this.state.jobList2} cols={1} value={this.state.job2} onChange={(value)=>this.handleJob2(value)} okText={Lang.ok_text || '确认'} dismissText={Lang.cancel || "取消"}>
                        <List.Item arrow="horizontal">{`${Lang.job_type || '職業類別'}2`}</List.Item>
                    </Picker>
                    <Picker extra={msg} data={this.state.jobList3} cols={1} value={this.state.job3} onChange={(value)=>this.handleJob3(value)} okText={Lang.ok_text || '确认'} dismissText={Lang.cancel || "取消"}>
                        <List.Item arrow="horizontal">{`${Lang.job_type || '職業類別'}3`}</List.Item>
                    </Picker>
                </List>
            </div>
        )
    }
}

export default Job;